 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">对账文件</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <div class="search-item">
            <i-input style="width: 28%" :value.sync="value" placeholder="商户ID"></i-input>
            <i-input style="width: 28%" :value.sync="value" placeholder="对账日期"></i-input>
            <i-select :model.sync="model" style="width: 28%; color: #000;" placeholder="状态">
                <i-option v-for="item in statuList" :value="item.value">{{ item.label }}</i-option>
            </i-select>
            <i-button style="background-color: rgb(0, 150, 136); color: white;">搜索</i-button>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <div style="float: left;">
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator></Page> <!-- page组件 -->
            </div>
          </div>
        </div>
      </div>
   </Card>

 </template>
 <script>
 let testData = {
   histories: [
     {
       checkDate: "2020-10-06",
       merchantId: "20000032",
       merchantName: "测试",
       merchantType: "商户类型",
       status: "已生成",
       time: "2020-10-06 16:53:02",
     },
     {
       checkDate: "2020-10-06",
       merchantId: "20000032",
       merchantName: "测试",
       merchantType: "商户类型",
       status: "已生成",
       time: "2020-10-06 16:53:02",
     },
     {
       checkDate: "2020-10-06",
       merchantId: "20000032",
       merchantName: "测试",
       merchantType: "商户类型",
       status: "已生成",
       time: "2020-10-06 16:53:02",
     }
   ]
 };
 import axios from "../../libs/axios.js";
 export default {
   name: 'merchant_statement',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       ajaxHistoryData: [],
       exportdata: [],
       // 初始化信息总条数
       dataCount: 0,
       // 每页显示多少条
       pageSize: 10,
       pageCurrent: 1,//当前页
       foodColumns: [
         {
           type: 'selection',
           width: 60,
           align: 'center',
           fixed: 'left'
         },
         {
           title: "对账日期",
           key: "checkDate"
         },
         {
           title: "商户ID",
           key: "merchantId"
         },
         {
           title: "商户名称",
           key: "merchantName"
         },
         {
           title: "商户类型",
           key: "merchantType"
         },
         {
           title: "状态",
           key: "status"
         },
         {
           title: "创建时间",
           key: "time"
         },
         {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
            return h("div", [
              h(
              "Button", {
                props: {
                size: "small"
                },
                style: {
                color: 'white',
                padding: '0 5px',
                height: '24px',
                fontSize: '12px',
                backgroundColor: "#009688",
                },
                on: {
                click: () => {
                  this.$router.push({
                  name: 'ban-edit'
                  })
                  // this.show(params.index)
                  // e.stopPropagation(); //阻止冒泡
                  // alert('查看');
                }
                }
              },
              "编辑"
              )
            ]);
           }
         }
       ],
       foodData: [],
       statuList: [
         {
           value: 'being',
           label: '状态'
         },
         {
           value: 'beijing',
           label: '未生成'
         },
         {
           value: 'shanghai',
           label: '已生成'
         }
       ],
       model: ''
     };
   },
   methods: {
     // 获取历史记录信息
     handleListApproveHistory() {
       // 保存取到的所有数据
       this.ajaxHistoryData = testData.histories;
       this.exportdata = testData.histories;
       this.dataCount = testData.histories.length;
       // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
       if (testData.histories.length < this.pageSize) {
         this.foodData = this.ajaxHistoryData;
       } else {
         this.foodData = this.ajaxHistoryData.slice(0, this.pageSize);
       }
     },
     // 点击切换页面
     changepage(index) {
       //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
       let _start = (index - 1) * this.pageSize;
       //需要显示结束数据的index
       let _end = index * this.pageSize;
       //截取需要显示的数据
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //储存当前页
       this.pageCurrent = index;
     },
     //每页显示的数据条数
     nowPageSize(index) {
       let _start = (this.pageCurrent - 1) * index;
       let _end = this.pageCurrent * index;
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //实时获取当前需要显示的条数
       this.pageSize = index;
     }
   },
   created() {
     this.handleListApproveHistory();
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 65px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-select-item-selected, .ivu-select-item-selected:hover{
       color: #fff;
       background-color: #5FB878;
     }
     .ivu-table-cell{
       padding-left: 7px;
       padding-right: 7px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-break: break-all;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
     .content-con{
       margin: 15px;
       .bank-search{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
         .search-item{
           display: flex;
           justify-content: space-between;
         }
       }
       .bank-add{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
         margin-bottom: 15px;
       }
       .bank-form{

       }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
